<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		#box {
			background-color: #ccc;
			border: 4px solid #000;
			width: 300px;
			height: 300px;
			margin: 100px auto;
			transform: scale(1);
		}
	</style>
</head>
<body>
	<div id="box"></div>
</body>
<script>
	let box = document.querySelector('#box');
	let lon1,lon2;
	let scale = oldScale = 1;

	function fnScale(touch1, touch2) {
		// 公式就是：a^2 + b^2 = c^2
		// 这里正负无所谓，反正只是算个比例
		return Math.sqrt(Math.pow(touch1.clinetX - touch2.clientX, 2) + Math.pow(touch1.clinetY - touch2.clientY, 2))
	}

	document.addEventListener('touchstart', function(ev) {
		if (ev.targetTouches.length >= 2) {
			lon1 = fnScale(ev.targetTouches[0], ev.targetTouches[1]);
			oldScale = scale;
		}
	}, false)

	document.addEventListener('touchmove', function(ev) {
		if (ev.targetTouches.length >= 2) {
			lon2 = fnScale(ev.targetTouches[0], ev.targetTouches[1]);
			scale = oldScale * (lon2 / lon1);
			box.style.transform = `scale(${scale})`;
		}
	}, false)

</script>
</html>